<template>
  <div class="check-task-container common-check-container">
      <div class="common-list-bread">
        <el-button class="common-btn-solid" size="small"  @click="onClikcGoBack">返回</el-button>
        <span class="check">查看试验任务</span>
      </div>
      <div class="check-container common-content-box">
        <div class="">
          <div class="detail-content-box active">
            <div class="common-two-box">
              <div class="common-item-box">
                <span class="common-item-label-left">试验名称：</span>
                <span>
                  {{name}}
                  <span v-if="coordinate">（{{coordinate}}）</span>
                </span>
              </div>
            </div>
            <div class="common-two-box">
              <div class="common-item-box">
                <span class="common-item-label-left">试验代号：</span>
                <span>
                  {{airportType || '--'}}
                </span>
              </div>
            </div>
            <div class="common-two-box">
              <div>
                <span class="common-item-label-left">试验负责人：</span>
                <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
              </div>
            </div>
            <div class="common-two-box">
              <div>
                <span class="common-item-label-left">使命主题：</span>
                <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
              </div>
            </div>
            <div class="common-two-box">
              <div>
                <span class="common-item-label-left">任务时间：</span>
                <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
              </div>
            </div>
            <div class="common-two-box">
              <div>
                <span class="common-item-label-left">任务状态：</span>
                <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
              </div>
            </div>
            <div class="common-two-box">
              <div style="width: 70%;display: flex;">
                <span class="common-item-label-left" style="flex: 0 0 71px;">资源描述：</span>
                <div>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}
                  <p>资源描述</p>
                  <div><i class="el-icon-document i"></i>  文件   <i class="el-icon-download i"></i><span class="download" @click="onClickDownLoadBtn">下载</span></div>
                  <div>文件  <span class="download" @click="onClickDownLoadBtn">下载</span></div>
                </div>

              </div>
            </div>
            <div class="common-two-box">
              <div>
                <span class="common-item-label-left">场地需求：</span>
                <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
              </div>
            </div>
            <div class="common-two-box">
              <div>
                <span class="common-item-label-left">人员需求：</span>
                <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
              </div>
            </div>
            <div class="common-two-box">
              <div>
                <span class="common-item-label-left">装备需求：</span>
                <span>{{statisticTomorrowPlanFlag === 1 ? '是' : '否'}}</span>
              </div>
            </div>
            <div class="common-two-box">
              <div class="common-item-box">
                <span class="common-item-label-left" style="padding-top: 25px;">包含科目：</span>
                <div class="check-box-table">
                  <el-table :data="runwayInfoList" class="common-check-table">
                    <el-table-column prop="name" label="科目状态" min-width="120" ></el-table-column>
                    <el-table-column prop="runwayLength" label="科目数量" min-width="120" ></el-table-column>
                    <el-table-column prop="direction" label="科目名称" min-width="120" ></el-table-column>
                  </el-table>
                </div>
              </div>
            </div>
          <div class="detail-content-box history">
            <p class="box-title">历史记录：</p>
            <div class="box-table">
              <el-table :data="changeHistoryVOList" class="common-check-table">
                <el-table-column prop="creator" label="时间" min-width="150"></el-table-column>
                <el-table-column prop="statusText" label="操作人" min-width="150"></el-table-column>
                <el-table-column prop="telegramNo" label="操作" min-width="150">
                  <template slot-scope="scope">
                    {{scope.row.telegramNo ? scope.row.telegramNo : '--'}}
                  </template>
                </el-table-column>
                <el-table-column label="修改前" min-width="150">
                  <template slot-scope="scope">
                    {{scope.row.remark ? scope.row.remark : '--'}}
                  </template>
                </el-table-column>
                <el-table-column prop="createdTime" label="修改后" min-width="150"></el-table-column>
              </el-table>
            </div>
          </div>
          
        </div>
      </div>
      <div class="common-footer">
        <el-button class="common-btn-solid" @click="onClickDel">删除</el-button>
        <el-button class="common-btn-solid" @click="onClickCloseTask">关闭任务</el-button>
        <el-button class="common-btn-solid" @click="onClickEditTask">编辑</el-button>
        <el-button class="common-btn-solid" @click="onClikcGoBack">返回</el-button>
      </div>
    </div>
    <form action="/api/template/downloadFile" method="get" ref="downLoadForm" hidden>
        <input type="hidden" name="templateId" v-model="curId">
    </form>
  </div>
</template>
<script>

  export default {
    data() {
      return {
        queryParams: {},    //列表页查询参数
        loading: false,
        alias: "",
        residentDepartmentList: [],    //驻场单位
        statisticTomorrowPlanFlag: false,    //是否统计次日本场计划
        briefName: '',    //机场简称
        changeHistoryVOList: [],
        closePeriodType: "",
        closedEndDate: "",
        coordinate: "",
        createdTime: "",
        id: "",
        name: "",
        remark: "",
        status: '',
        airportType: '',
        runwayInfoList: [],
        residentModelList: [],
        pcnValue: '', 
        altitude: '',
        otherInfo: '',
        telegramNo: "",




      
        curId: "",//点击下载文件对应的id
      }
    },
    created() {
      this.queryParams = this.$route.query;
      // this.asyncGetAirportInfo(this.queryParams.id);
    },
    methods: {
      //获取机场信息
      asyncGetAirportInfo(id) {
        this.loading = true;
        this.$axios.get("/airport/getAirportInfo?id="+ id).then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            let data = res.data.data;
            console.log('this');
            console.log(this.$attrs);
            Object.keys(data).forEach((item) => {
              if (item !== 'coordinate') {
                this[item] = data[item];
              }
            });
            let _coordinate = JSON.parse(data.coordinate);
            let _lng = _coordinate.lng;
            let _lat = _coordinate.lat;
            this.coordinate = _lat.deg ? `N${_lat.deg}°${_lat.min ? _lat.min : "00"}′${_lat.sec ? _lat.sec : "00"}″ E${_lng.deg}°${_lng.min ? _lng.min : "00"}′${_lng.sec ? _lng.sec : "00"}″` : '';
          } else {
            this.$message.error(res.data.msg);
          }
        })
      },
      //点击--删除
      onClickDel() {
        this.$confirm("确认删除该任务吗？", "删除确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
        center: true,
        customClass: "common-confirm-box",
        confirmButtonClass: "common-btn-primary",
        cancelButtonClass: "common-btn-text",
      }).then(() => {
        /* this.$axios
          .get("/experimentGroup/deleteExperimentGroup?id=" + id)
          .then((res) => {
            if (res.data.code === 200) {
              this.onClikcGoBack();
            } else {
              this.$message.error(res.data.msg);
            }
          }); */
      });
      },
      //点击--关闭任务
      onClickCloseTask() {
        this.$confirm("确认关闭该任务吗？", "关闭确认", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        showClose: false,
        type: "warning",
        center: true,
        customClass: "common-confirm-box",
        confirmButtonClass: "common-btn-primary",
        cancelButtonClass: "common-btn-text",
      }).then(() => {
        /* this.$axios
          .get("/experimentGroup/deleteExperimentGroup?id=" + id)
          .then((res) => {
            if (res.data.code === 200) {
              this.onClikcGoBack();
            } else {
              this.$message.error(res.data.msg);
            }
          }); */
      });
      },
      //点击--编辑
      onClickEditTask() {
        this.$router.push({
          path: '/experimentTask/editTask',
          query: {
            currentTabId: id
          }
        })
      },
      //点击--返回
      onClikcGoBack() {
        this.$router.push({
          path: '/experimentTask',
          query: this.queryParams
        })
      },
      //点击--下载
      onClickDownLoadBtn(id) {
        this.curId = id;
        this.$nextTick(()=> {
          this.$refs.downLoadForm.submit()
        })
      },
    },
  }
</script>
<style scoped>
  .detail-content-box {
    padding: 50px 20px 10px;
    background-color: #fff;
  }
  .detail-content-box.active {
    padding-top: 20px;
  }
  .detail-content-box.history {
    display: flex;
    padding: 0;
  }
  .box-title {
    flex: 0 0 71px;
    padding-top: 21px;
    font-weight: 700
  }
  .box-table {
     width: 75%;
  }
   .detail-content-box:nth-child(2) {
    margin: 0 20px;
    padding: 20px 0;
    border-top: 1px dashed var(--color-gray-secondary);
  }
  .detail-content-box > div {
    margin-bottom: 15px;
  }

 
  .check{
    padding-left: 10px;
  }
  .i{
    color:#C5C5C5;
  }
  .download {
    cursor: pointer;
    color:#5E83EB;
  }
</style>
